<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
      <!--      <span>-->
      <!--        <span class="mr-4">显示设置:</span>-->
      <!--        <a-select ref="select" placeholder="请选择" v-model:value="selected" style="width: 200px">-->
      <!--          <a-select-option value="a">项目a</a-select-option>-->
      <!--          <a-select-option value="b">项目b</a-select-option>-->
      <!--          <a-select-option value="c">项目c</a-select-option>-->
      <!--          <a-select-option value="d">项目d</a-select-option>-->
      <!--        </a-select>-->

      <!--        <a-button type="primary">设置</a-button>-->
      <!--      </span>-->
    </div>
    <this-table class="mt-2" @on-add="onAdd" />

    <this-add ref="addM" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import { ref } from 'vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import thisTable from './table.vue';
import thisAdd from './add.vue';

export default defineComponent({
  components: { LayoutBreadcrumb, DownloadOutlined, CheckOutlined, thisTable, thisAdd },
  setup() {
    const selected = ref();
    const addM = ref();
    const onAdd = () => {
      addM.value.open();
    };
    return {
      selected,
      onAdd,
      addM,
    };
  },
});
</script>
